import React from 'react';
import {View, StyleSheet} from 'react-native';
import Play from './Play';
import {navigate, viewportWidth} from '@/utils/index';
import {connect, ConnectedProps} from 'react-redux';
import {RootState} from '@/models/index';

const mapStateToProps = ({player}: RootState) => {
  return {
    playState: player.playState,
  };
};

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;

interface IProps extends ModelState {
  routeName: string;
}
const PlayView: React.FC<IProps> = props => {
  const {routeName, playState} = props;

  const onPress = () => {
    navigate('Detail');
  };

  if (
    routeName === 'Root' ||
    routeName === 'Detail' ||
    routeName === '' ||
    playState === 'paused'
  ) {
    return null;
  }
  return (
    <View style={styles.container}>
      <Play onPress={onPress} />
    </View>
  );
};
const viewWidth = 50;
const styles = StyleSheet.create({
  container: {
    width: viewWidth,
    height: viewWidth + 20,
    position: 'absolute',
    bottom: 0,
    left: (viewportWidth - viewWidth) / 2,
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    borderTopLeftRadius: 25,
    borderTopRightRadius: 25,
    alignItems: 'center',
    padding: 4,
    // ...Platform.select({
    //   android: {
    //     elevation: 4,
    //   },
    //   ios: {
    //     shadowColor: 'rgba(0, 0, 0, 0.3)',
    //     shadowOpacity: 0.85,
    //     shadowRadius: 5,
    //     shadowOffset: {
    //       width: StyleSheet.hairlineWidth,
    //       height: StyleSheet.hairlineWidth,
    //     },
    //   },
    // }),
    // ...Platform.select({
    //   android: {
    //     elevation: 4,
    //   },
    //   ios: {
    //     shadowColor: 'rgba(0, 0, 0, 0.3)',
    //     shadowOpacity: 0.85,
    //     shadowRadius: 5,
    //     shadowOffset: {
    //       width: StyleSheet.hairlineWidth,
    //       height: StyleSheet.hairlineWidth,
    //     },
    //   },
    // }),
  },
});

export default connector(PlayView);
